<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			position: absolute;
			top: 100px;
			left: 500px;
			background-color: rgb(248, 172, 172);
			width: 500px;
			height: 500px;
		}
	</style>
</head>
<body>
	<div><canvas id="canvas1" width="500" height="500" style="position: absolute; top: 0; left: 0;"></canvas></div>
	<script type="text/javascript">
		var canvas1 = document.querySelector('#canvas1');
		var ctx = canvas1.getContext('2d');
		//绘制起始点
		ctx.beginPath();
		ctx.moveTo(50,600-35*7);
		//设置经过的点
		ctx.lineTo(150,600-37*7);
		ctx.lineTo(250,600-35*7);
		ctx.lineTo(350,600-32*7);
		ctx.arc(250,600-35*7,3,0,2*Math.PI);
		ctx.arc(350,600-32*7,3,0,2*Math.PI);
		ctx.font = "18px 微软雅黑";  
        ctx.fillStyle = "#333";
        ctx.fillText(36+"°",250-10,600-35*7-20,50); 
		ctx.strokeStyle = 'red';
		ctx.lineCap = 'round';//设置起始路径的线段边缘情况
		ctx.lineJoin = 'round';//路径上的线段边缘情况
		ctx.miterLimit = '10px'; //尖锐的角度
		ctx.stroke();
		ctx.closePath();
		//绘制路径样式
		ctx.beginPath();
		ctx.moveTo(50,700-35*7);
		//设置经过的点
		ctx.lineTo(150,700-37*7);
		ctx.lineTo(250,700-35*7);
		ctx.lineTo(350,700-32*7);
		ctx.strokeStyle = 'black';
		ctx.lineCap = 'round';//设置起始路径的线段边缘情况
		ctx.lineJoin = 'round';//路径上的线段边缘情况
		ctx.miterLimit = '10px'; //尖锐的角度
		ctx.stroke();
		ctx.closePath();
		//绘制路径宽度
		//绘制路径
		//填充路径
	</script>
	<!-- <script type="text/javascript">
		var canvas1 = document.querySelector('#canvas1');
		var ctx = canvas1.getContext('2d');
		//绘制起始点
		ctx.beginPath();
		ctx.moveTo(40,50);
		//设置经过的点
		ctx.lineTo(50,300);
		ctx.moveTo(50,300);
		ctx.lineTo(300,300);
		ctx.moveTo(300,300);
		ctx.lineTo(300,250);
		ctx.closePath();
		//绘制路径样式
		ctx.strokeStyle = 'red';
		//绘制路径宽度
		ctx.lineWidth = 20;
		//绘制路径
		ctx.lineCap = 'round';//设置起始路径的线段边缘情况
		ctx.lineJoin = 'round';//路径上的线段边缘情况
		ctx.miterLimit = '10px'; //尖锐的角度
		ctx.stroke();
		//填充路径
		ctx.fill();
		//第二段线条用lineto 的话 会连笔  但是用moveto +lineto 就不会连笔了
	</script> -->
	<!-- <script type="text/javascript">
		var canvas1 = document.querySelector("#canvas1");
		var ctx = canvas1.getContext('2d');//绘制圆
		ctx.arc(100,100,100,0,2*Math.PI);
		ctx.stroke();
		ctx.fill();
	</script> -->
</body>
</html>